<template>
	<view class="page">
		<view :class="['whiteBgLeft', scroll? 'toLeft':'']">
			<image class="logo" src="../../static/logo.jpg" mode=""></image>
			<view class="btn">微信</view>
		</view>
		<view :class="['whiteBgRight', scroll? 'toRight':'']">
			<image class="logo" src="../../static/logo.jpg" mode=""></image>
			<view class="btn">登录</view>
		</view>
		<button v-if="!scroll" class="getUserInfoBtn" type="default" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
	
		<u-toast ref="loginRef" />
	</view>
</template>

<script>
	var _mine
	export default {  
		data() {
			return {
				scroll: false,
			}
		},
		mounted() {
			_mine = this
		},
		methods: {
			// 获取用户信息的回调
			getUserInfo: async function(res){
				const { avatarUrl, nickName } = res.detail.userInfo
				if (avatarUrl && nickName) {
					uni.setStorageSync('avatarUrl', avatarUrl)
					uni.setStorageSync('nickName', nickName)
					
					const openid = uni.getStorageSync('openid')
					await _mine.$post.login({ openid, user: nickName }).then(res => {
						const { token } = res.data
						uni.setStorageSync('token', token)
						_mine.$refs.loginRef.show({
							title: '登录成功',
							type: 'success'
						})
					})
					this.scroll = true
					
					// 登录成功直接切换tabbar到第一项
					uni.$emit('changeCurrent', {current: 0})
					// 延迟1s销毁登录页面
					setTimeout( e => {
						uni.$emit('changeShowLogin')
					}, 1000)
				}else{
					this.$refs.loginRef.show({
						title: '登录失败！请重试',
						type: 'error'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.getUserInfoBtn{
		position: fixed;
		top: 450rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: transparent;
		z-index: 10000;
		width: 400rpx;
		height: 80rpx;
	}
	.whiteBgLeft,
	.whiteBgRight{
		position: fixed;
		top: 0;
		z-index: 9998;
		width: 50vw;
		height: 100vh;
		background-color: #fff;
		overflow: hidden;
	}
	.whiteBgLeft{
		left: 50%;
		transform: translateX(-100%);
	}
	.whiteBgRight{
		right: 50%;
		transform: translateX(100%);
	}
	.whiteBgLeft .logo,
	.whiteBgRight .logo{
		position: fixed;
		top: 200rpx;
		z-index: 9999;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.whiteBgLeft .logo{
		right: 0;
		transform: translateX(50%);
	}
	.whiteBgRight .logo{
		left: 0;
		transform: translateX(-50%);
	}
	
	.whiteBgLeft .btn,
	.whiteBgRight .btn{
		position: fixed;
		top: 450rpx;
		z-index: 9999;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #007AFF;
		color: #666;
	}
	.whiteBgLeft .btn{
		right: 0;
		text-align: right;
		border-right: none!important;
		border-radius: 5px 0 0 5px;
	}
	.whiteBgRight .btn{
		left: 0;
		text-align: left;
		border-left: none!important;
		border-radius:  0 5px 5px 0;
	}
	.toLeft{
		animation: toLeft 1s forwards;
	}
	.toRight{
		animation: toRight 1s forwards;
	}
	
	@keyframes toLeft{
		from{
			left: 50%;
		}
		to{
			left: 0;
			opacity: 0;
		}
	}
	@keyframes toRight{
		from{
			right: 50%;
		}
		to{
			right: 0;
			opacity: 0;
		}
	}
</style>
